import React from 'react';
import { Toast, WingBlank } from 'antd-mobile';
import { Button, Carousel, WhiteSpace } from 'antd-mobile';
import { List, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
import './login.css'
import UserStore from '../../store/UserStore.js';
import { observer } from 'mobx-react';
import { observable, computed, action } from 'mobx';
import "babel-polyfill";
@observer class Login extends React.Component {        
    constructor(props) {  
        super(props);
        this.state = {
            isLogin: false
        }
        this.login = this.login.bind(this);  
    }
    async componentDidMount() {
        let isLogin = await UserStore.checkLogin();
        this.setState({ isLogin });
        if ( isLogin ) {
            this.props.history.push('/index');
        }     
    }
    async login() {
        const { phone, password } = this.props.form.getFieldsValue();   
        const userInfo = await UserStore.login(phone, password);    
        console.log(userInfo);
        if (userInfo.code == -1) {
            Toast.fail('密码错误或账号不存在', 1);
            console.log(UserStore.loginInfo);
        } else if (userInfo.code == 0) {
            console.log(UserStore.loginInfo);
            Toast.success('登录成功！', 1);
            this.props.history.push('/index');
        }
        // this.setState({ isLogin });
        // console.log(this.state.isLogin);
        // if ( this.state.isLogin.isLogin ) {
        //     await Toast.success('登陆成功', 1);
        //     this.props.history.push('/index');
        // }        
        // else {
        //     await Toast.fail('账户不存在或密码不正确', 1);        
        // }
    }
    render() {     
        const { getFieldProps } = this.props.form;  
        return (
            <div className="login-wrap">
                 <div className="login-wrap-background"></div>
                 <div className="login-wrap-login-box">
                    <WhiteSpace />
                    <WhiteSpace />
                    <WhiteSpace />
                    <WhiteSpace />                    
                    <InputItem
                        {...getFieldProps('phone')}
                        clear
                        placeholder="请输入账号"
                        ref={el => this.autoFocusInst = el}
                    >账号</InputItem>
                    <InputItem
                        {...getFieldProps('password')}
                        type="password"
                        placeholder="请输入密码"                   
                    >密码</InputItem>                     
                    <WhiteSpace />
                    <WhiteSpace />
                    <WhiteSpace />
                    <WhiteSpace />
                    <WhiteSpace />
                    <WhiteSpace />
                    <div className="login-wrap-button-wrap">
                        <Button onClick={this.login} type="primary">登录</Button>
                    </div>
                 </div>
            </div>
        )
    }
}

//导出组件；
const H5NumberInputExampleWrapper = createForm()(Login);
export default H5NumberInputExampleWrapper;
